<template>
  <div class="app"> <!-- app采用普通文档流，不设置宽高，由内容撑大 -->
    <v-header :seller="this.$store.getters['seller/getSeller']"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <div class="content">
      <keep-alive>
        <router-view :seller="this.$store.getters['seller/getSeller']"></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import queryString from 'query-string'
import Header from './components/header/header'

const ERR_OK = 0
export default {
  name: 'App',
  components: {
    'v-header': Header,
  },
  methods: {

  },
  data() {
    return {
      seller: {},
    }
  },
  created() {
    const objQs = queryString.parse(location.search)
    // console.log('/api/seller')
    // this.$http.get('/api/seller?id=' + objQs.id, { emulateJSON: true }).then((response) => {
    //   if (response.data.errno === ERR_OK) {
    //     // console.log('/api/seller backup')
    //     this.seller.id = objQs.id
    //     this.seller = Object.assign(response.data.data, this.seller)
    //     // console.log(this.seller)
    //   }
    // }, () => {
    //   console.log('服务器错误！')
    // })

    // test vuex
    // console.log('this.$store.getters[\'seller/getSeller\']:')
    // console.log(this.$store.getters['seller/getSeller'])
    // console.log('this.$store')
    // console.log(this.$store)
    this.$store.dispatch('seller/initSeller', {
      sellerId: objQs.id
    })
  },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import './common/stylus/mixin.styl'

  .app
    .tab
      display: flex
      flex-diretory: row
      width: 100%
      height: 40px
      line-height: 40px
      border-1px(rgba(7,17,27,0.1))
      .tab-item
        flex: 1
        text-align: center
        & > a
          display: block
          text-decoration: none
          font-size: 14px
          color: rgb(77,85,93)
          &.active
            color: rgb(240,20,20)
</style>
